<!--
 * @Author: ChunLai
 * @Date: 2022-08-26 11:34:11
 * @LastEditTime: 2023-09-07 10:11:00
 * @Description: 投保前 必读确认内容
 * @FilePath: \0.newInsure\src\views\preinsure\reads\Common.vue
-->
<template>
  <div class="single-file-read bg-fff" v-if="Object.keys(readObj).length > 0">
    <div class="flex-aj_cc file-title">
      {{ readObj.title }}
    </div>
    <div class="file-cont" v-html="readObj.content"></div>
    <div class="file-act" v-if="readObj.hasTick && readObj.hasTick === '1'">
      <van-checkbox
        v-model="checked"
        shape="square"
        checked-color="#f54040"
        icon-size="14px"
      >
        {{ readObj.tickText || checkText }}
      </van-checkbox>
    </div>
    <div class="foot-sure-btn">
      <van-button
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        block
        round
        @click="tijiao"
        >下一步</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "PreInsureReadCommon",
  data() {
    return {
      readIndex: 0,
      readObj: {},
      checked: false,
      checkText: "本人已认真阅读并理解上述内容",
    };
  },
  computed: {
    ...mapGetters({
      preInsConfig: "home/preInsConfig",
    }),
    readLists() {
      return this.preInsConfig && this.preInsConfig.readlist;
    },
  },
  created() {
    this.readObj = this.readLists[0];
  },
  methods: {
    leftBtnEvent() {
      this.$backRouter();
    },
    tijiao() {
      const len = this.readLists.length,
        isTick = this.readLists[this.readIndex].hasTick || "";
      if (isTick === "1" && !this.checked) {
        return this.$toast("请阅读并勾选上述内容");
      }
      if (this.readIndex < len - 1) {
        this.readObj = {};
        window.scrollTo(0, 0);
        ++this.readIndex;
        this.readObj = this.readLists[this.readIndex];
        this.checked = false;
        return false;
      }
      console.log("阅读完成");
      this.$router.push("/info");
    },
  },
};
</script>

<style lang="less" scoped>
.single-file-read {
  padding: 10px 14px;
}

.file-title {
  width: 100%;
  height: 40px;
  line-height: 1;
  font-weight: 600;
  background: #fefaca;
  letter-spacing: 2px;
  font-size: 16px;
  margin-bottom: 14px;
}

.file-act {
  margin-top: 10px;
}
.foot-sure-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 40px;
}
</style>
